<template>
    <div>
<h1>子组件</h1>
<h2>{{info}}</h2>
<h2>{{obj}}</h2>
<h2>{{msg.msg}}</h2>
<h2>{{msg1}}</h2>
<button @click="pinchuan">拼串</button>
<GrandSon></GrandSon>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref} from 'vue'
import GrandSon from './GrandSon.vue'
export default defineComponent({
    // props:['info','obj'],
    components: {
GrandSon

  },
    props:{
info:{
    type:String,
    required:true,
    default:'zzz',
},
obj:{
    type:Object,
    required:false,
    default:()=>{
        return{}
    }
}
    },
    emits:['fun','foo'],
    setup (props,context) {
        console.log(props)
        console.log(props.info)
        console.log(props.obj)
        console.log(context)
        console.log(context.attrs);
        console.log(context.attrs.msg);
        const msg=context.attrs; //proxy
        const msg1=ref(context.attrs.msg);  //ref
        console.log(context.emit);
        context.emit('fun','腾讯视频');
        function pinchuan(){
context.emit('fun','888888')
context.emit('foo','44444');
        }
        console.log(context.slots)
        return {
            msg,
            msg1,
            pinchuan
            
        }
    },
    mounted(){
        console.log(this.$attrs)
    }
})
</script>

<style scoped>

</style>